<template>
	<div clas="app">
		<div class="order_choose" id="products" v-if="tags.length>1">
			<div class="order_choose-list" v-for="(item,index) in tags" @click="swichNav(index,item.id)" :key="item.id" v-if="tags.length>1">
				<div>
					<div class="order_choose-box" ><text :class="[currentTab==index ? 'order_choose_title' : 'order_choose_title_no']">{{item.name}}</text></div>
					<div><text :class="[currentTab==index ? 'order_choose_subtitle' : 'order_choose_no_subtitle']">{{item.memo}}</text></div>
				</div>
			</div>
		</div>
		<slider :index="currentTab" class="swiper-box" @change="bindChange" :style="{height:allHeight}">
			<div v-for="(item,index) in tags" :key="item.id">
				<div class="column_box" v-if="currentTab===index">
					<div v-for="items in productList">
						<columnProduct :product="items"></columnProduct>
					</div>
				</div>
				<noData class="empty" noDataText="暂无商品" v-if="productList.length==0"></noData>
			</div>
		</slider>
	</div>
</template>
<script>
	import {
		list
	} from '../../../../api/product'

	import {
		list as tagList
	} from '../../../../api/tag'
	const eeui = app.requireModule('eeui');
	import noData from '../../../../components/noData/noData.vue'
	import columnProduct from '../../../../components/productCoupons/column.vue'
  const storage = weex.requireModule('storage')
	// import common from '../../../../../common/dist/appboard/common.js'
	export default {
		name: 'products',
		data() {
			return {
				tagIds: [],
				tagId: '',
				scrollTop: '',
				tags: [],
				allHeight: 'height:600px',
				length: '',
				pageId: 18,
				componentsList: [],
				productList: [],
				winWidth: 0,
				winHeight: 0,
				currentTab: 0,
				pageSize: 20,
			}
		},
		created() { // 在实例创建完成后被立即调用
			if(!this.pageNum){
				this.pageNum=1
			}
			this.loadTags()
		},
		props: ['content','pageNum'],
		watch:{
			pageNum(newVal,oldVal){

				if(newVal!=oldVal&&this.newVal!=''&&newVal!=0){
					this.loadProduct()
				}
			}
		},
		methods: {
			loadTags() {
				var _this = this;
				if (this.content.tagids != null) {
					this.tagIds = this.content.tagids.split(',');
          console.log(this.tagIds)
					for (var i = 0; i < this.tagIds.length; i++) {
					  if (this.tagIds[i] == 'null'){
					    this.tagIds.splice(i,1)
            }else {
              this.tagIds[i] = parseInt(this.tagIds[i])
            }
					}
				}
				tagList({
					pageNum: this.pageNum,
					pageSize: 5,
					mchId: this.getGlobalData().mchId,
					type: '3',
					tagIds: this.tagIds,
				}).then(res => {
					_this.tags = res.data.data
					_this.tagId = this.tags[0].id
					setTimeout(() => {
						_this.pageNum = 0
						_this.productList = []
						_this.loadProduct()
					}, 500)
				})

			},
			bindChange(e){
//				eeui.loading();
				this.tagId=this.tags[e.index].id
				this.currentTab=e.index
				 this.pageNum = 0
				 this.productList = []
				 this.loadProduct()
//				 setTimeout(()=>{
//				 	 eeui.loadingClose();
//				 },500)

			},
			swichNav(index, id) {
				if (this.currentTab === index) {
					return false;
				} else {
					this.currentTab = index
				}
			},
			loadProduct(callback) {
				var _this = this
				if(this.pageNum==1){
					_this.productList=[]
				}
				list({
					tagIds: this.tagId,
					mchId: this.getGlobalData().mchId,
					pageSize: _this.pageSize,
					pageNum: _this.pageNum,
				}).then(res => {
					 res.data.data.forEach(item=>{
						item.thumbnail = _this.thumbnail(item.thumbnail, 350, 360)
						_this.productList.push(item)
					})
					if (_this.productList.length % 2 == 0) {
						_this.allHeight = (((_this.productList.length / 2) * 610) + 40) + 'px'
					} else {
						_this.allHeight = ((((_this.productList.length + 1) / 2) * 611) + 40) + 'px'
					}
					if (_this.productList.length == 0) {
						_this.allHeight =  600 + 'px';
					}
					if (callback) {
						callback()
					}
				})
			},
		},
		components: {
			noData,
			columnProduct
		},
	}
</script>

<style scoped>
	.app{
		flex:1;
	}
	.order_choose {
		width: 710px;
		text-align: center;
		/* line-height: 80px; */
		background-color: #fff;
		justify-content: space-around;
		padding-bottom: 20px;
		padding-top: 20px;
		margin-left: 20px;
		margin-top: 30px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		/* height: 80px; */

	}

	.order_choose-list {
		/* width: 150px; */
		/* height: 30px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		/* border-color: black;
		border-style: solid;
		border-width: 1px; */
	}

	.order_choose-box{
		/* border-color: black;
		border-style: solid;
		border-width: 1px; */
		max-width: 200px;
	}

	.order_choose_title_no {
		font-size: 30px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: block;
		/* lines: 1; */
		/* text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;*/
		max-width: 200px;
		text-align: center;
	}

	.order_choose_title {
		text-align: center;
		font-size: 30px;
		font-weight: 400;
		color: rgba(215, 38, 28, 1);
		/* display: block; */
		/* lines: 1; */
		/* text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap; */
		/* width: 200px; */
	}

	.swiper-box {
		flex: 1;
		display: flex;

		overflow: hidden;
	}

	/* .swiper-box view {
	  text-align: center;
	} */

	.order_choose_line {
		width: 49px;
		height: 10px;
		border-radius: 1px;
	}

	.order_choose_line_no {
		background: linear-gradient(0deg, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
	}

	.column_box {
		flex-wrap: wrap;
		width: 750px;
		display: flex;
		flex-direction: row;
	    padding: 20px;
		justify-content: space-between;
	}

	.empty {
		/*margin-left: 50%;*/
	}

	.order_choose_subtitle {
		font-size: 22px;
		width: 130px;
		/* height: 40px; */
		border-radius: 30px;
		color: white;
		background-color: red;
		text-align: center;
		line-height: 40px;
		display: block;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.order_choose_no_subtitle {
		font-size: 22px;
		width: 130px;
		/* height: 40px; */
		border-radius: 30px;
		text-align: center;
		line-height: 40px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
